<template>
  <div class="Loding page-container mini-padding">
    <h1>自定义加载中指令</h1>
    <div class="box" v-loading1="loading" :loading-leave="handleLeave"></div>
    <h2>使用说明</h2>
    <h2>指令文件  src/directive/loading.ts</h2>
    <h2>使用示例</h2>
    <pre style="font-size: 16px;">
  已经全局注册无需引入，直接将所需要loading效果的标签上加上 v-loading1 即可  
  &lt;div class="box" v-loading1="loading" :loading-leave="handleLeave"&gt;&lt;/div&gt;

  let loading = ref(true)
  setTimeout(() => {
    loading.value = false
  }, 1000)
          
  const handleLeave = () => console.log('指令关闭了')
    </pre>

  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
let loading = ref(true)

setTimeout(() => {
  loading.value = false
}, 1000)
        
const handleLeave = () => console.log('指令关闭了')
</script>

<style scoped lang='scss'>
.Loding{

}
 
</style>